@import "ui-variables";

.timecop {
  .timecop-panel {
    background-color: @tool-panel-background-color;
  }

  overflow: auto;

  .panels {
    display: flex;
    flex-direction: row;
  }

  .package-panel {
    display: flex;
    flex-direction: row;
    flex: 1;

    .list-group {
      overflow: hidden;
    }

    .inset-panel {
      width: 100%;
    }
  }

  .text-info {
    margin-bottom: @component-padding;
  }

  .timing,
  .list-item {
    display: flex;
    justify-content: space-between;
    .inline-block:last-child {
      margin-right: 0;
    }
  }

  .timing {
    margin-bottom: @component-padding;
  }

  .list-item {
    margin-top: (@component-padding / 2);
    margin-bottom: (@component-padding / 2);
  }

  .package {
    color: @text-color;
    &:hover {
      text-decoration: none;
      color: @text-color-selected;
    }
  }
  .timecop-line {
    flex: 1 1 0;
    margin-right: @component-padding;
    margin-top: .80em;
    border-top: 1px dashed fade(@text-color, 20%);
  }

  .package:hover + .timecop-line {
    border-color: fade(@text-color, 60%);
  }

}
